<!-- 库房管理 -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header height="80px">
        <el-form-item label="库房">
          <el-input placeholder="请输入库房名称" style="width: 200px" v-model="form.warehouseName" />&emsp;
          <el-button type="primary" @click="queryWarehouse">查询</el-button>
        </el-form-item>
        <el-button @click="dialogVisible = true" type="primary">添加</el-button>
      </el-header>
      <el-main style="height: 300px;">
        <div class="warehouse-management">
          <el-table :data="warehouseList" style="width: 100%;">
            <el-table-column prop="warehouseId" label="序号" />
            <el-table-column prop="warehouseName" label="库房名称" width="150px" />
            <el-table-column prop="warehouseAddress" label="库房地址" width="150px" />
            <el-table-column prop="dict_Item" label="库房编码" />
            <el-table-column prop="warehouseStatus" label="状态">
              <template #default="{ row }">
                <span :class="row.warehouseStatus === true ? 'enable' : 'disable'">
                  {{ row.warehouseStatus === true ? '启用' : '禁用' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="warehouseCapacity" label="库房面积" />
            <el-table-column label="操作" width="160px">
              <template #default="{ row }">
                <el-button link type="primary">编辑</el-button>
                <el-button link type="primary">查看</el-button>
                <el-button link type="primary" @click="deleteWareHouse(row.warehouseId)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer>
        <el-pagination style="margin-top: 10px;" v-model:current-page="paging.pageIndex"
          v-model:page-size="paging.pageSize" :page-sizes="[2, 3, 5]" :background="true"
          layout="total, sizes, prev, pager, next, jumper" :total="paging.totalCount" />
      </el-footer>
    </el-container>
  </div>
  <!-- 添加物资分类弹框 -->
  <el-dialog v-model="dialogVisible" title="添加物资分类" width="600" draggable>
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="库房名称">
            <el-input v-model="addForm.warehouseName" placeholder="请输入库房名称" style="width: 200px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库房编码">
            <el-input v-model="addForm.dict_Item" placeholder="请输入库房编码" style="width: 200px" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="库房面积">
            <el-input v-model="addForm.warehouseCapacity" placeholder="请输入库房面积" style="width: 200px" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状    态">
            <el-radio-group v-model="addForm.warehouseStatus">
              <el-radio :value="true" label="启用">启用</el-radio>
              <el-radio :value="false" label="停用">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="地    址">
        <el-input v-model="addForm.warehouseAddress" placeholder="请输入地址" style="width: 500px" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addData">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue"
import { ElMessage } from "element-plus"
import { useRouter } from "vue-router"
import { goodsshelfAdd, goodsshelfShow } from "@/api/Index"
//import { useCounterStore } from "@/stores/counter"
import axios from "axios"
import { tr } from "element-plus/es/locales.mjs"

//const store = useCounterStore()
const router = useRouter()

//添加弹框
const dialogVisible = ref(false)
//分页数据
const paging = reactive({
  pageIndex: 1,
  pageSize: 3,
  totalCount: 1,
  pageCount: 1
})
//查询条件
const form = ref({
  PageIndex: paging.pageIndex,
  PageSize: paging.pageSize,
  warehouseName: "",
})

//分页监听
watch(paging, () => {
  getWareHouse()
})

//钩子
onMounted(() => {
  getWareHouse()
})
//查询按钮
const queryWarehouse = () => {
  getWareHouse()
}

//添加数据
const addForm = reactive({
  dict_Item: '',//字典项
  warehouseName: "",//库房名称
  warehouseAddress: "",//库房地址
  warehouseCapacity: '',//总容量
  warehouseStatus: true,//状态
  del_Flag: false,//删除
})
//添加弹框保存按钮
const addData = () => {
  goodsshelfAdd(addForm).then(res => {
    if (res.code === 200) {
      ElMessage.success("库房添加成功")
      dialogVisible.value = false
      getWareHouse()
    } else {
      ElMessage.error("库房添加失败")
    }
  })
}
//添加按钮
const addWarehouse = () => {
  //router.push({ name: "addWarehouse" })
}

const warehouseList = ref<any>([])
const getWareHouse = () => {
  goodsshelfShow(form.value).then(res => {
    console.log(res)
    warehouseList.value = res.data.list
    paging.totalCount = res.data.totalCount
    paging.pageCount = res.data.totalPage
  })
}
//删除库房
const deleteWareHouse = (warehouseId: number) => {
  axios.post("http://localhost:5139/api/BasicData/DleteWareHouse", { WarehouseId: warehouseId })
    .then(res => {
      console.log(res)
      if (res.data.code === 200) {
        ElMessage.success("库房删除成功")
        getWareHouse()
      } else {
        ElMessage.error(res.data.msg)
      }
    })
}

</script>

<style scoped>
.warehouse-management {
  margin: 20px;
}
</style>